<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
			<u-tabs 
				:list="tabs" 
				:activeStyle="{color:'#3f2a17',fontSize:'30rpx'}"
				:inactiveStyle="{fontSize:'30rpx'}"
				lineColor="var(--main-color-1)"
				@change="tabChange"
			>
			    <view
			        slot="right"
			    >
					<text class="text-xs text-warning">{{configInfo.integral_company}}：{{userInfo.integral}}</text>
			    </view>
			</u-tabs>
		<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
		<view class="" v-if="!listLoad">
			<view class="m-md section-bg p-md radius-10" v-for="(item,index) in list.data" :key="index">
				<view class="content flex-between flex-align-items">
					<view class="u-line-1 text-sm">{{item.title}}</view>
					<view class="number" :class="{on : item.num > 0}">{{item.num}}</view>
				</view>
				<view class="text-xs m-t-sm flex-between flex-align-items">
					<view class="font">
						{{item.create_time}}
					</view>
					<view class="text-success" v-if="item.num > 0">{{$t('my_wallet.log-screen-income')}}</view>
					<view class="text-warning" v-if="item.num < 0">{{$t('my_wallet.log-screen-payout')}}</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" v-if="showLoading"></uni-load-more>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				showLoading:false,
				listLoad:true,
				status:"loading",
				action:'all',
				cacheKey:'account_list_data_integral',
				scrollTop: 0,
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			tabs: state => state.wallet.integralTabs,
			list: state => state.wallet.integralLog,
			param:state => state.wallet.integraParam,
		}),
		
		async onLoad(option){
		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		/* 页面显示 */
		async onShow(){
			this.getList();
		},
		
		/* 页面隐藏 */
		onHide(){
			// 关闭加载
			uni.stopPullDownRefresh();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 下拉刷新
		async onPullDownRefresh(){
			await this.getList();
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});	
		},
		
		// 下滑加载
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);	
		},
		
		methods: {
			...mapActions(['getIntegraLog']),
			...mapMutations(['updateWalletState']),
			
			async getList(page = 0){
				if (page) {
					let param = uni.$u.deepClone(this.param)
					param.page = page
					this.updateWalletState({
						key: 'integraParam',
						val: param
					})
				}
				
				await this.getIntegraLog(this.param)
				this.listLoad = false
			},
			
			tabChange(index){
				this.listLoad = true;
				let param = uni.$u.deepClone(this.param)
				param.action = index.action
				this.updateWalletState({
					key: 'integraParam',
					val: param
				})
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.getList(1)
				
				
				// this.pageLoading = true;
				// this.action = index.action;
				// this.getList();
				// this.onState = index.state;
			}
		},
		
	}
</script>

<style lang="scss">
	page{
		background-color:var(--theme-page-bg);
	}
	
	.m-count{
		margin: 10px 30rpx;
		font-size: 32rpx;
		text-align: center;
	}
	.uni-load-more{
		height: 10vh;
		margin-top: 20rpx;
	}
	.u-tabs{
		padding: 0 30rpx;
		background-color: #fff;
	}
	.m-walletcard{
		// margin: 15px 30rpx;
		// position: relative;
	}
	.m-icon{
		border-radius: 25px;
		border: 1px solid #f2bc35;
		padding: 3px 5px;
	}
	// .money-list{
	// 	.e-num{
	// 		font-weight: bold;
	// 		font-size: 33rpx;
	// 		color: $auxcolor-3;
	// 	}
	// 	.e-num.on{
	// 		color: $auxcolor-4;
	// 	}
	// 	.label{
	// 		color:$incolor-2
	// 	}
	// 	// .label.on{
	// 	// 	color:$incolor-2
	// 	// }
	// }
</style>
